<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>QR Code Widget</title>
		<script type="text/javascript">
			//<![CDATA[

var widget;
var tgd = tgd || {};
tgd.Widgets = tgd.Widgets || {};

tgd.Widgets.QR = function(image, menu, start, display, input, loading) {
	//set defaults
	var _lastSearch;
	var BASE_QR_URL = "https://chart.googleapis.com/chart?cht=qr&chs=100x100&chld=|1&chl=";

	function show(ele) {
		start.style.display = display.style.display = input.style.display = loading.style.display = "none";
		ele.style.display = "";
	}

	function resizeImage() {
		//using document.documentElement.client____ for IE 7
		var height = (window.innerHeight || document.documentElement.clientHeight) - menu.clientHeight;
		var width = (window.innerWidth || document.documentElement.clientWidth);

		if (width < height) {  //portrait
			image.style.width = "100%";
			image.style.height = "";
		} else {  //landscape
			image.style.height = height + "px";
			image.style.width = "";
		}
	}

	function init() {
		_lastSearch = null;
		image.src = "";
		show(start);
		image.style.display = "none";
		resizeImage();
	}

	start.onclick = start.onmouseover = display.onclick = display.onmouseover = function() {
		show(input);
		input.focus();
	}

	input.onmouseout = function() {
		if (input.value === "" || input.value === _lastSearch) {
			show(_lastSearch ? display : start);
		}
	}

	input.onkeypress = function(e) {
		//use keyCode/charCode until DOM level 3 is implemented, event.keyCode is for IE7
		var key = ((e) ? e.keyCode || e.charCode : event.keyCode);

		if (key === 13) { //enter
			if (input.value !== _lastSearch) {
				show(loading);
				_lastSearch = input.value;
				display.textContent = display.innerText = _lastSearch;  //use innerText for IE7
				image.style.display = "none";
				image.src = BASE_QR_URL + _lastSearch;
			} else {
				//todo: The user just made this search.
			}
		}
	}

	window.onresize = resizeImage;

	image.onload = function(e) {
		show(display);
		image.style.display = "";
		input.value = "";
	}

	init();
}

function init() {
	widget = new tgd.Widgets.QR(
		document.getElementById("imgQR"),
		document.getElementById("panInput"),
		document.getElementById("panStart"),
		document.getElementById("panTerm"),
		document.getElementById("txtSearch"),
		document.getElementById("panLoading")
	);
}
			//]]>
		</script>

		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#fff;}
			body,#panTerm,#panStart, #panLoading,input{font-family:sans-serif;text-align:center;font-size:1.25em;}
			#panStart, #panLoading,#panTerm,input{width:99%;border:1px solid;padding:2px;margin:0 auto;}
			#panStart,#panLoading,#panTerm{border-color:#fff;}
			#panStart,#panLoading{color:#999;}
			#panInput{position:fixed;bottom:0;right:0;left:0;}
		</style>
	</head>
	<body onload="init();">
		<img id="imgQR" />
		<div id="panInput">
			<div id="panStart">Enter data and press enter ...</div>
			<div id="panLoading">Loading ...</div>
			<div id="panTerm"></div>
			<input id="txtSearch" type="text" value=""/>
		</div>
	</body>
</html>
